<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <title>vuex</title>
</head>
<body>
<div id="app">
    {{$store.state.count}}
    <button @click="$store.commit({type: 'increment', amount: 10})">++</button>
    <counter-a></counter-a>
    {{$store.mutations}}
</div>
<script>
    const moduleA = {
        state: {
            count:0
        },
        mutations:{
            increment(state, payload) {
                state.count += payload.amount
            }
        }
    };
    const store = new Vuex.Store({
        modules: {
            a: moduleA
        },
        state: {
            count: 0,
            todos: [
                {done: false, id: 1},
                {done: true, id: 2},
                {done: false, id: 3},
                {done: true, id: 4},
            ],
            cart:{
                added: [
                    {id:1},
                    {id:2}
                ]
            }
        },
        mutations: {
            increment(state, payload) {
                state.count += payload.amount
            }
        },
        getters: {
            doneTodos: state => {
                return state.todos.filter(todo=>todo.done)
            },
            doneTodosCount: (state, getters) => {
                return getters.doneTodos.length
            },
            getTodoById: (state) => (id) => {
                return state.todos.find(todo=> todo.id === id)
            }
        },
        actions: {
            increment({commit}, payload) {
                commit({
                    type: 'increment',
                    amount: payload.amount
                })
            },
            incrementAsync({commit}, payload) {
                setTimeout(()=>{
                    commit({
                        type: 'increment',
                        amount: payload.amount
                    })
                }, 1000)
            },
            checkout ({commit, state}, products) {
                const savedCartItems = [...state.cart.added];
                commit(types.CHECKOUT_REQUEST)
            }
        }
    });
     const Counter = {
        template: `
            <div>
            <div>{{count}}</div>
            <div>{{countAlias}}</div>
            <div>{{doneTodosCount}}</div>
            <div>{{getTodoById(2)}}</div>
            <button @click="increment({amount: 10})">increment</button>
            <button @click="incrementAsync({amount: 10})">incrementAsync</button>
</div>

        `,
        computed: {
            localComputed(){},
            ...Vuex.mapState({
                count: state=>state.count,
                countAlias: 'count',
            }),
            doneTodosCount() {
                return this.$store.getters.doneTodosCount
            },
            ...Vuex.mapGetters([
                'getTodoById',
            ])
        },
         methods: {
            ...Vuex.mapMutations([
                'increment',
            ]),
            ...Vuex.mapActions([
                'incrementAsync'
            ])

         }
    }
    const app = new Vue({
        el: '#app',
        store,
        components:{
            'counter-a': Counter,
        }
    });

</script>
</body>
</html>